<template>
    <div class="dictionaryManage">
        <el-dialog :title="editAddFlag>-1?'编辑':'新增'" :visible.sync="dialogVisible" width="30%">
            <el-form label-position="left" label-width="80px">
                <el-form-item label="房间名称">
                    <el-input v-model="tableOne.name"></el-input>
                </el-form-item>
                <el-form-item label="选择用电器">
                    <el-checkbox-group v-model="checkEleapps">
                        <el-checkbox v-for="eleapp in checkEleappList"
                                     :label="eleapp.eleappcode"
                                     :key="eleapp.eleappid">{{eleapp.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="排序号">
                    <el-input v-model="tableOne.sort"></el-input>
                </el-form-item>
                <el-form-item label="标识值">
                    <el-input v-model="tableOne.roomcode"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="tableOne.remark"></el-input>
                </el-form-item>
                <el-form-item label="创建人">
                    <el-input v-model="tableOne.createby"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
        </el-dialog>

        <el-card shadow="hover" class="box-card">
            <div slot="header" class="clearfix">
                <div class="cardWrap">
                    <div class="headerLeft">
                        <el-input placeholder="请输入门牌号" v-model="selectname"></el-input>
                        <el-button type="primary" @click="selectAll">查询</el-button>
                    </div>
                    <div class="headerRight">
                        <el-button type="primary" size="small" icon="el-icon-plus" @click="add">新增</el-button>
                    </div>
                </div>
            </div>
            <div class="item">
                <table-template
                        :pageSizes="[5, 10, 15]"
                        :pageSize="limit"
                        @currentPage="pageChange"
                        :totalPage="totalPage"
                        :editable="true"
                        @receiveEdit="edit"
                        @receiveDel="del"
                        :tableData="tableData"
                        :tableHeader="tableHeader"
                ></table-template>
            </div>
        </el-card>
    </div>
</template>

<script>
    import tableTemplate from "../../../../components/tableTemplate";
    import {list} from "../../../../api/bishe/room";
    import {update} from "../../../../api/bishe/room";
    import {remove} from "../../../../api/bishe/room";
    import {save} from "../../../../api/bishe/room";

    export default {
        components: {
            tableTemplate
        },
        data() {
            return {
                selectname: "", //查询条件
                chosevalue: "", //筛选框
                editAddFlag: null, //编辑或添加标识
                dialogVisible: false, //dialog显示flag
                limit: 5,
                currentPage: 1,
                totalPage: 0,
                //用电器复选框
                checkEleappList:[],
                checkEleapps:[],

                tableOne: {},
                tableData: [],
                tableHeader: [
                    {prop: "name", label: "房间名称"},
                    {prop: "sort", label: "排序"},
                    {prop: "roomcode", label: "标识值"},
                    {prop: "eleappcodes", label: "所拥有的用电器"},
                    {prop: "housecode", label: "门牌号"},
                    {prop: "createtime", label: "创建时间"},
                    {prop: "updatetime", label: "更新时间"},
                    {prop: "remark", label: "备注"}
                ]
            };
        },
        created() {
            this.selectAll();
        },

        computed: {
            // options() {
            //   return this.$store.state.options;
            // },
            //
            // treeData() {
            //   return this.$store.state.treeData;
            // }
        },

        methods: {
            selectAll() {
                const payload = {
                    selectname: this.selectname,
                    page: +this.currentPage,
                    limit: this.limit
                }
                list(payload)
                    .then(res => {
                        this.checkEleappList=res.data.rows2;
                        this.tableData = res.data.rows;
                        this.totalPage = Math.ceil((res.data.total) / this.limit);
                        if (res.data.rows.length == 0 && this.currentPage != 1) {
                            this.currentPage = String(--this.currentPage);
                            this.selectAll();
                        }
                    })
                    .catch(err => {
                        this.$message({
                            message: "请求失败",
                            type: "warning",
                            center: true
                        });
                    });
            },
            sizeChange(e) {
                const payload = {
                    id: e
                };
                shiftCircuitPageSizeChange(payload).then(res => {
                    this.selectAll();
                })
            },
            pageChange(index) {
                this.currentPage = index + "";
                this.selectAll();
            },

            //单机弹框的按钮保存之类的操作
            sure() {
                //弹框关闭
                this.tableOne.eleappcodes=this.checkEleapps.join(',');
                this.dialogVisible = false;
                if (this.editAddFlag > -1) {
                    //编辑
                    update(this.tableOne)
                        .then(res => {
                            if (res.code === 20000) {
                                this.$message({
                                    message: res.message,
                                    type: "success",
                                    center: true
                                });
                                this.selectAll();
                            } else {
                                this.dialogVisible = true;
                                this.$message({
                                    message: res.message,
                                    type: "warning",
                                    center: true
                                });
                            }
                        })
                        .catch(err => {
                            this.$message({
                                message: "请求失败",
                                type: "warning",
                                center: true
                            });
                        });
                } else {
                    //新增
                    save(this.tableOne)
                        .then(res => {
                            if (res.code === 20000) {
                                this.$message({
                                    message: res.message,
                                    type: "success",
                                    center: true
                                });
                                this.selectAll();
                            } else {
                                this.dialogVisible = true;
                                this.$message({
                                    message: res.message,
                                    type: "warning",
                                    center: true
                                });
                            }
                        })
                        .catch(err => {
                            this.$message({
                                message: "请求失败",
                                type: "warning",
                                center: true
                            });
                        });
                }
            },
            add() {
                this.editAddFlag = -1000;
                this.dialogVisible = true;
                this.checkEleapps=[],
                this.tableOne = {};
            },
            edit(row) {
                this.editAddFlag = 1000;
                this.dialogVisible = true;
                this.tableOne = row;
                let split2 = this.tableOne.eleappcodes.split(',');
                this.checkEleapps=split2;
            },
            del(row) {
                console.log(row);
                var id = row.roomid;
                var sendData = [id];
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    remove(id)
                        .then(res => {
                            if (res.code === 20000) {
                                this.$message({
                                    message: res.message,
                                    type: "success",
                                    center: true
                                });
                                this.selectAll();
                            } else {
                                this.$message({
                                    message: res.message,
                                    type: "warning",
                                    center: true
                                });
                            }
                        })
                        .catch(err => {
                            this.$message({
                                message: "请求失败",
                                type: "warning",
                                center: true
                            });
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    };
</script>

<style lang='less' scoped>
    .dictionaryManage {
        width: 98.5%;
        height: 100%;
        padding: 10px;
        .cardWrap {
            display: flex;
            justify-content: space-between;
            height: 60px;
            padding: 0 60px;
            height: 40px;
            .headerLeft {
                .el-input {
                    width: auto;
                    margin-right: 10px
                }
                display: flex;
                justify-content: space-between
            }
            span {
                margin-right: 30px;
            }
        }
    }
</style>
